<template>
    <van-grid square :gutter="10" class="font-myfont ">
        <van-grid-item v-for="(item,index) in typeState" 
        :key="index"  
        :text="item.type" 
        @click="addDataToConsumption(item.type)"
        @click.show="show = true"
        />
    </van-grid>
    <!-- <van-cell plain type="primary" @touchstart.stop="show = true">
        弹出带标题的键盘
        </van-cell> -->
        <van-number-keyboard
        :show="show"
        title="键盘标题"
        extra-key="."
        close-button-text="完成"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
    />

    <!-- <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '50%' }"
        <van-number-keyboard
            theme="custom"
            extra-key="."
            close-button-text="完成"
            @blur="show = false"
            @input="onInput"
            @delete="onDelete"
            />

        </van-popup> -->
    <!-- <div>
    <button @click="addDataToConsumption">Add Data</button>
  </div> -->
</template>

<script setup lang="ts">
import type { 
    ConsumptionStateItem,
} from "../types/home"
import { toRefs } from 'vue'
import { useHomeStore } from '@/store/homeStore'
import { ref } from "vue";
const homeStore = useHomeStore()
const {
    typeState,
 } = toRefs(homeStore)
// const show = ref(false);

function addDataToConsumption(type) {
    const newData: ConsumptionStateItem = {
    userId: '1',
    title: '新购物记录',
    price: 50,
    remarks: '新购商品备注',
    time: 18.00,
    type: type,
  }
  homeStore.addConsumption(newData)
}

    const show = ref(true);
    const onInput = (value) => showToast(value);
    const onDelete = () => showToast('删除');


</script>

<style lang="css" scoped>
:deep(.van-grid-item ){
    --van-grid-item-text-font-size:2rem;
}
</style>